<template>
  <div class="mobile-carousel6">
    <div v-fade-in class="carousel-title">天启明通团队</div>
    <M-button v-slide-up @click="handleDetail" />
    <van-swipe
      v-slide-up
      :autoplay="30000"
      :show-indicators="true"
      indicator-color="#fff"
      class="swipe"
    >
      <van-swipe-item v-for="(item, index) in data" :key="index">
        <div v-slide-plus class="card">
          <div class="card-bg">
            <img v-if="item.avatar" :src="publicSrc(item.avatar)" />
            <div class="item-title">{{ item.nickName }}</div>
            <div class="item-content">{{ item.remark }}</div>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script setup lang="ts">
import { publicSrc } from "@/utils/common";
import { useRouter } from "vue-router";

const router = useRouter();

defineProps({
  data: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
});

const handleDetail = () => {
  router.push("/m/about");
};
</script>
<style lang="scss" scoped>
.mobile-carousel6 {
  width: 100%;
  height: 100vh;
  background: url("@/assets/home/carousel6.png") no-repeat;
  background-size: cover;
  position: relative;
  padding: 0 1.25rem;
  box-sizing: border-box;
  .carousel-title {
    position: absolute;
    left: 1.25rem;
    top: 18%;
    font-size: 22px;
    font-weight: 700;
    line-height: 32px;
    color: #fff;
    z-index: 4;
  }
  :deep(.more-btn) {
    position: absolute;
    left: 1.25rem;
    top: 26%;
    z-index: 4;
  }
  .card-grid {
    display: none;
  }
  .swipe {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 10%;
    box-sizing: border-box;
  }
  .card {
    height: 50vh;
    position: relative;
  }
  .card-bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100% - 2.25rem);
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(6px);
    padding: 40px 30px;
    color: #fff;
    line-height: 22px;
    text-align: left;
    box-sizing: border-box;
    transition: all 0.5s;
    img {
      position: absolute;
      left: 50%;
      top: -2.25rem;
      width: 4.5rem;
      height: 4.5rem;
      border-radius: 50%;
      transform: translateX(-50%);
      border: 1px solid #fff;
      opacity: 1;
      object-fit: cover;
    }
    .item-title {
      font-size: 20px;
      font-weight: 700;
    }
    .item-content {
      font-size: 16px;
      opacity: 0.9;
      display: -webkit-box;
      line-clamp: 4;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-top: 10px;
      line-height: 26px;
    }
  }
}
</style>
